<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言管理</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            padding: 20px;
            background: white;
        }

        .header {
            margin-bottom: 20px;
        }

        .message-list {
            display: grid;
            gap: 20px;
        }

        .message-card {
            border: 1px solid #eee;
            border-radius: 4px;
            padding: 15px;
            background: white;
        }

        .message-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            color: #666;
            font-size: 14px;
        }

        .message-content {
            margin: 10px 0;
            line-height: 1.6;
        }

        .message-actions {
            margin-top: 10px;
        }

        .btn {
            padding: 5px 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            color: white;
        }

        .btn-approve {
            background: #4caf50;
        }

        .btn-delete {
            background: #f44336;
        }

        .status {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 12px;
        }

        .status-pending {
            background: #fff3e0;
            color: #e65100;
        }

        .status-approved {
            background: #e8f5e9;
            color: #2e7d32;
        }

        .no-data {
            text-align: center;
            color: #999;
            padding: 40px 0;
            font-size: 14px;
            width: 100%;
            background: rgba(0,0,0,0.02);
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h2>留言管理</h2>
    </div>

    <div class="message-list" id="messageList">
        <!-- 留言列表将通过 JavaScript 动态加载 -->
    </div>

    <script>
        // 加载留言列表
        async function loadMessages() {
            try {
                const response = await fetch('../api/messages/list.php');
                const result = await response.json();
                
                if (!result.success) throw new Error(result.message);
                
                const messages = result.data;
                const messageList = document.getElementById('messageList');
                
                if (messages.length === 0) {
                    messageList.innerHTML = '<div class="no-data">暂无留言数据</div>';
                    return;
                }
                
                messageList.innerHTML = messages.map(message => `
                    <div class="message-card">
                        <div class="message-header">
                            <span>地区：${message.province} ${message.city}</span>
                            <span>时间：${message.created_at.substring(0, 16)}</span>
                            <span>
                                状态：<span class="status status-${message.status}">
                                    ${message.status === 'approved' ? '已通过' : '待审核'}
                                </span>
                            </span>
                        </div>
                        <div class="message-content">${message.content}</div>
                        <div class="message-actions">
                            ${message.status !== 'approved' ? 
                                `<button class="btn btn-approve" onclick="approveMessage(${message.id})">通过</button>` : 
                                ''
                            }
                            <button class="btn btn-delete" onclick="deleteMessage(${message.id})">删除</button>
                        </div>
                    </div>
                `).join('');
            } catch (error) {
                console.error('加载失败:', error);
                alert('加载失败，请重试');
            }
        }

        // 通过留言
        async function approveMessage(id) {
            try {
                const response = await fetch(`../api/messages/approve.php?id=${id}`);
                const result = await response.json();
                if (!result.success) throw new Error(result.message);

                loadMessages();
            } catch (error) {
                console.error('操作失败:', error);
                alert('操作失败，请重试');
            }
        }

        // 删除留言
        async function deleteMessage(id) {
            if (!confirm('确定要删除这条留言吗？')) return;

            try {
                const response = await fetch(`../api/messages/delete.php?id=${id}`);
                const result = await response.json();
                if (!result.success) throw new Error(result.message);

                loadMessages();
            } catch (error) {
                console.error('删除失败:', error);
                alert('删除失败，请重试');
            }
        }

        // 页面加载时加载留言列表
        loadMessages();
    </script>
</body>
</html> 